<template>
  <div>
    <el-table :data="data" stripe height="713">
      <el-table-column
        v-for="info in rightHeader"
        :key="info.key"
        :property="info.key"
        :label="info.label"
      >
        <template slot-scope="scope">
          {{ scope.row[scope.column.property] }}
          <!-- 渲染对应表格里面的内容 -->
        </template>
      </el-table-column>

      <el-table-column label="任务状态">
        <template slot-scope="scope">
          <el-tag v-model="scope.row.status" size="small">{{
            scope.row.status
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column>
        <template slot-scope="scope">
          <el-button
            :disabled="scope.row.status == '维修中' ? false : true"
            v-model="scope.row.status"
            @click="finshRepair(scope.row, scope.$index)"
            size="small"
            >维修完成</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="blockPage">
      <div style="margin-top: 0.2rem; margin-left: 0.2rem">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 7, 10]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totals"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { eachMapping } from "@jridgewell/trace-mapping";
import axios from "axios";
import { TypedChainedSet } from "webpack-chain";
export default {
  data() {
    return {
      score: "",
      rightHeader: [
      {
          label: "任务编号",
          key: "id",
        },
          {
            label: "订单编号",
            key: "orderId",
          },
          {
            label: "预约时间",
            key: "appointTime",
          },
          {
            label: "任务状态",
            key: "status",
          },
          {
            label: "维修员",
            key: "repairName",
          },
          {
            label: "空调类型",
            key: "airCondType",
          },
          {
            label: "故障原因",
            key: "speculateReason",
          },
          {
            label: "满意度",
            key: "score",
          },
      ],
      data: [],
      pagesize: 5,
      currentPage: 1,
      totals: 10,
      dialogFormVisible: false,
      dialogVisible1: false,
      index: "",
      formLabelWidth: "120px",

      appointTime: "",
      dialogVisible: false,
      token:JSON.parse(localStorage.getItem("user")).token
    };
  },

  // 每次刷新页面就加载分页数据
  mounted: function () {
    this.onLoad(1, 10);
  },

  methods: {
    // 每页数据条数改变时的事件
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
      this.onLoad(this.currentPage, val);
    },

    // 页号改变时的事件
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log("this.currentPage=" + this.currentPage);
      console.log("this.pagesize=" + this.pagesize);
      this.onLoad(this.currentPage, this.pagesize);
    },

    // 分页数据查询
    onLoad(current, size) {
      axios({
        method: "post",
        url: "http://localhost:9090/repairTask/pageMyTask",
        data: {
          current: current,
          size: size,
        },
        headers: {
          token: this.token,
        },
      })
        .then((res) => {
          console.log("分页查询task成功，data:", res.data);
          this.data = res.data.records;
          this.totals = res.data.total;
          console.log("totals:=" + this.totals);
        })
        .catch((err) => {
          console.log("查询task失败", err);
        });
    },

    // 编辑订单
    editOrder(order, index) {
      this.dialogFormVisible = true;
      this.index = index;
    },
    handleConfirm() {
      this.edit.id = JSON.stringify(this.data[this.index].id);
      axios({
        method: "post",
        url: "http://localhost:9090/order/edit",
        data: {
          id: this.edit.id,
          airCondType: this.edit.airCondType,
          airCondCode: this.edit.airCondCode,
          speculateReason: this.edit.speculateReason,
          repairReco: this.edit.repairReco,
        },
      })
        .then((res) => {
          this.$message({
            message: "订单编辑成功",
            type: "success",
          });
          console.log("订单编辑成功");
        })
        .catch((err) => {
          this.$message.error("订单编辑失败");
          console.log("订单编辑失败---" + err);
        });
      console.log(this.edit, "sdfasfsadf");
      this.dialogFormVisible = false;
    },

    // 删除订单
    deleteOrder(item) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios({
            method: "post",
            url: "http://localhost:9090/order/delete",
            data: {
              id: item.id,
            },
          })
            .then((res) => {
              console.log("删除成功");
              this.data.forEach((order, index, arr) => {
                if (order.id == item.id) {
                  arr.splice(index, 1);
                }
              });
            })
            .catch((err) => {
              console.log("失败---" + err);
            });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //完成维修
    finshRepair(item, index) {
      axios({
        method: "post",
        url: "http://localhost:9090/repairTask/finish",
        data: {
          id: item.id,
        },
      })
        .then((res) => {
          console.log("修改成功");
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          this.data[index].status='已完成'
        })
        .catch((err) => {
          this.$message.error("修改失败");
          console.log("失败---" + err);
        });
    },
  },
};
</script>

<style></style>
